<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">系统设置</div>
      </template>
      <el-form label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="systemName"></el-input>
        </el-form-item>
        <el-form-item label="系统版本">
          <el-input v-model="systemVersion"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义系统名称和版本的响应式变量
const systemName = ref('');
const systemVersion = ref('');

// 保存设置的方法
const saveSettings = () => {
  console.log('保存系统名称:', systemName.value);
  console.log('保存系统版本:', systemVersion.value);
};

// 重置设置的方法
const resetSettings = () => {
  systemName.value = '';
  systemVersion.value = '';
};
</script>

<style scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>
